<template>
	<view class="zsxcx">
		
		
		<view class="zsimage">
			<!-- <van-image width="10rem" height="10rem" fit="fill" :src="goditem.image" /> -->
			<image class="imagezs"   :src="goditem.image" mode="widthFix" @click="previewImage(goditem.image)"></image>
		</view>

		<view class="zstext">
			<view class="zstextprice">{{goditem.xiangqing}}</view>
			<view class="zstextxq">{{goditem.price}}</view>
			 <button  class="fx"  open-type="share">分享</button>
			<view class="bangdan">
				<view class="bang">榜</view>
				<button v-if="isMe" class="fx" data-name="shareBtn" open-type="share">分享</button>
				<view class="dan" @click="gohot()">热搜排行榜&emsp;{{sou}}></view>
			
			</view>
			
			
		</view>
		<view class="zstextT">
			<view class="xqtiao">
				
			</view>
			<view class="zstexttwo">
				详情
			</view>
			

		</view>
		<view class="xqshuju">
			<ul>
				<view class="ooo">
					<li>名&emsp;&emsp;称</li>
				</view>
				&emsp;&emsp;&emsp;
				
				<li class="l2">{{goditem.xiangqing}}</li>
			</ul>
			<ul>
				<view class="ooo">
				<li>类&emsp;&emsp;型</li>
				</view>
				&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.classs}}</li>
			</ul>
			<ul>
				<view class="ooo">
				<li>材&emsp;&emsp;质</li>
				</view>
				&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.text}}</li>
			</ul>
			
			<ul>
				<view class="ooo">
				<li>其&emsp;&emsp;他</li>
				</view>
			&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.text2}}</li>
			</ul>
		</view>

<view class="zstextT">
			<view class="xqtiao">
				
			</view>
			<view class="zstexttwo">
				商品介绍
			</view>
			

		</view>
		<view v-if="imagee.length>0" class="zsig">
			<!-- <van-image width="10rem" height="10rem" fit="fill" :src="goditem.image" /> -->
			<image v-for="item in imagee" :src="item.image_url" :key="item.objectId" @click="previewImageone(item.image_url)" mode="aspectFit"></image>

		</view>
		<view class="elsetext" v-else>
			<view>
				暂无详情
			</view>
		</view>
		<view class="ph" @click="gophone()">
			<view class="phone" >有意向点击联系我们</view>
		</view>



	</view>
</template>

<script>
	export default {
		name: 'zs',
		props: ['goditem', 'imagee','sbimage','sou'],
		data() {
			return {
				
			}
		},
		
		
		onLoad() {
			
		},
	

		
		methods: {
			onShareAppMessage: function(e) {
							let title = '恭喜dog.东西获得成功'
							return {
								title: title,
								path: '../index/index'
							}
						},

			   shareToWechat() {
			        let href = '';
			        if (uni.getEnv() === 'WEB') {
			          // 在web环境下，使用document.URL获取当前页面链接
			          href = document.URL;
			        } else {
			          // 在小程序环境下，获取当前页面路径
			          const pages = getCurrentPages();
			          const currentPage = pages[pages.length - 1];
			          href = `/${currentPage.route}`;
			        }
			  
			        uni.share({
			          provider: 'weixin',
			          type: 'miniProgram',
			          href: href, // 获取当前页面链接
			          success: function (res) {
			            uni.showToast({
			              title: '分享成功',
			              icon: 'success'
			            });
			          },
			          fail: function (err) {
			            uni.showToast({
			              title: '分享失败',
			              icon: 'none'
			            });
			          }
			        });
			      },
			gohot(){
				uni.navigateTo({
					url:`../hot/hot`
				})
			},
			gophone(){
				uni.switchTab({
					url:'/pages/myhome/myhome'
				})
				
			},
			previewImage(e) {
			  // console.log(this.goditem.imageurl)
				uni.previewImage({
					urls:[e],
					current:e
				})
			  },
			  previewImageone(e) {
			  // console.log(e)
				uni.previewImage({
					urls:[e],
					current:e
				})
			  }
			  
			  
		}
	}
</script>

<style>
	.fx{
		width: 20vw;
	}
	.toptext{
		/* border: 1px solid red; */
		height: 11vw;
		background-color: white;
	}
	.ph {
		height: 90px;
	}

	.phone {
		width: fit-content;
		height: 40px;
		margin: 0 auto;
		/* border: 1px solid black; */
		text-align: center;
		line-height: 40px;
		font-size: 26px;
		background-color: coral;
		color: white;
		margin-top: 20px;

	}

	.divder {
		/* border-bottom: 1px solid rgb(245, 245, 245); */
		height: 1px;
		margin-top: 3px;
		margin-bottom: 4px;
	}

	.shangbiao {
		width: 100px;
		height: 50px;
		border: 1px solid black;
	}

	.imagezs {
		width: 100%;
		/* max-height: 100px; */
	}

	.zsimage {
		/* border: 1px solid black; */
		margin-top: 3vw;
		width: 100%;
		/* margin-top: 6px; */
		background: white;

	}

	.zstext {
		width: 100%;
		min-height: 130px;
		
		margin-top: 10px;
		background-color: white;
		margin: 0 auto;
	}

	.zstextprice {
		margin-top: 10px;
		font-size: 20px;
		/* color: red; */
		margin-left: 14px;
	}

	.zstextxq {
		/* float: right; */
		font-size: 20px;
		margin-top: 10px;
		margin-left: 20px;
		flex-wrap: wrap;
		
	}
	.bangdan{
	
		margin: 0 auto;
		margin-top: 30px;
		width: 250px;
		height: 28px;
		display: flex;
		line-height: 28px;
		
		
		
	}
	.bang{
		width: 28px;
		height: 28px;
		background-color: rgb(253,237,236);
		color: rgb(246,89,90);
		font-weight: bold;
		padding-left: 8px;
		border-radius:  30% 0 0 30%  ;
		
	}
	.dan{
		background-color: rgb(255,246,245);
		color: rgb(239,79,66);
		height: 28px;
		font-weight: 500;
			border-radius:0 8%  8% 0 ;
	}

	.zsig image {
		/* border: 1px solid black; */
		margin: 0 auto;
		width: 100%;
		background-color: white;
	}

	.zsig {
		
	}

	.elsetext {
		/* border: 1px solid black; */
		width: 100%;
		height: 200px;
		background-color: white;
		
	}

	.elsetext view {
		width: 80px;
		height: 50px;
		/* border: 1px solid black; */
		line-height: 200px;
		margin: 0 auto;
	}
	.zstextT{
		width: 100%;
		margin: 0 auto;
		height: 20xp;
		background-color: white;
		margin-top: 5px;
		color: black;
	}
	.zstextT view{
		
		display: inline-block;
		
	}
	.xqtiao{
		margin-top: 10px;
		width: 3px;
		height: 18px;
		margin-left:18px ;
		background: linear-gradient(to bottom,rgb(239,104,92),rgb(246,188,187));
		
	}
	.zstexttwo {
		width: fit-content;
		/* margin-top: 5px; */
		font-size: 16px;
		height: 30px;
		margin-left: 5px;
		font-weight: bold;
		/* border: 1px solid black; */
		
	}
	

	.jg {
		font-size: 16px;
	}
	.zsxcx{
		background-color: rgb(245,245,245);
		
	}
	.divder {
		/* border-bottom: 1px solid rgb(245, 245, 245); */
		/* border: 1px solid black; */
		height: 48px;
		width: 200px;
		float: right;
		margin: 0 auto;
		margin-right: 10px;
		
	}
	.divder h1{
		/* border: 1px solid black; */
		line-height: 48px;
		margin: 0 auto;
		size: 12px;
	}
	.xqshuju{
		width: 100%;
		/* margin: 0 auto; */
	/* border: 1px solid gainsboro; */
		background-color: white;
		
	}
	.xqshuju ul{
		width: 90%;
		height: 38px;
		line-height: 38px;
		margin-left: 20px;
		
		border: 1px solid gainsboro;
		border-bottom: none;
		display: flex;
		}
	.xqshuju ul li{
		margin-left: 15px;
	
		display: inline;
	
	}
	.ooo{
		height: 38px;
		width: 100px;
		border-right: 1px solid gainsboro;
	}
	
	.l2{
		margin-left: 30px;
	}
</style>